<template>
  <div class="head">
    <div class="head_box">
      <div class="content">
        <!-- logo和标题部分 -->
        <div class="logo_part">
          <img class="logo_img" src="../assets/logo.png" alt="网站logo" />
          <span class="logo_title">数码商城</span>
        </div>
        <!-- 搜索框部分 -->
        <div class="search_part">
          <el-input
            placeholder="请输入内容"
            v-model="searchInput"
            class="input-with-select"
          >
            <el-select
              v-model="selectSearchType"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="商品" value="1"></el-option>
              <el-option label="店铺" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <!-- 购物车按钮部分 -->
        <div class="cartbtn_part">
          <el-button type="primary">
            <router-link to="/cart">
              购物车<i class="el-icon-shopping-cart-1 el-icon--right"></i>
            </router-link>
          </el-button>
        </div>
      </div>
      <!-- 菜单栏部分 -->
      <div class="menu">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="cate in catesType"
            :key="cate.id"
            :label="cate.type"
            :name="cate.id"
          >
            <router-link :to="cate.link" ></router-link>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInput: "",
      selectSearchType: "商品",
      catesType: [
        { id: "0", type: "首页", link: "/home" },
        { id: "1", type: "全部商品", link: "/allproducts" },
        { id: "2", type: "手机", link: "/" },
        { id: "3", type: "电脑", link: "/" },
        { id: "4", type: "秒杀专场", link: "/" },
      ],
      activeName: "0",
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab.index);
      this.$router.replace(this.catesType[tab.index].link);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables.scss";
.head {
  width: 100%;
  .head_box {
    width: 80%;
    margin: auto;
    .content {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px auto 30px;
      .logo_part {
        height: 60px;
        display: flex;
        .logo_img {
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }
        .logo_title {
          line-height: 60px;
          font-size: 28px;
          font-weight: 600;
          color: $dark-green;
        }
      }
      .search_part {
        width: 580px;
        .el-select {
          width: 80px;
        }
        .el-button {
          width: 60px;
          //   background-color: $dark-green;
          //   border-top-left-radius: 0;
          //   border-bottom-left-radius: 0;
        }
      }
      .cartbtn_part {
        .el-button {
          border-radius: 0;
          a{
            color: white;
          }
        }
      }
    }
    .menu {
      width: 90%;
      margin: 0 auto -13px;
    }
  }
}
// 深度修改el-tab组件样式
::v-deep .el-tabs__nav {
  transform: translateX(80px) !important;
}
::v-deep .el-tabs__item {
  font-size: 18px;
  padding: 0 30px;
}
</style>